<template>
	<view class="sec-container">
		<!-- #ifdef H5 -->
		<download-nav v-if="showDownload" :top="44"></download-nav>
		<!-- #endif -->
		<loading-view v-if="isFirstLoading"></loading-view>
		<view class="sec-main">
			<view class="sec-title">
				<view class="sec-title-icon">
					<u-icon name="checkmark" size="28"></u-icon>
				</view>
				<view class="sec-title-text">
					下单成功
				</view>
			</view>
			<view class="sec-title-tips">
				到店确认核销，线下支付剩余尾款
			</view>
			<view class="team-follow-user__tips-top" v-if="goodsDetail.last_gruop && goodsDetail.last_gruop.length">
				还差<text
					class="team-follow-user__tips-top-strong">{{ goodsDetail.group_limit_num - goodsDetail.last_gruop[0].sub_group_orders.length }}</text>人，赶快邀请好友拼团吧
			</view>
			<view class="team-follow-user__tips-top" v-else>还差<text
					class="team-follow-user__tips-top-strong">{{ goodsDetail.group_limit_num }}</text>人，赶快邀请好友拼团吧</view>
			<view class="invite"
				@click.stop="goPage('/pages/goods_details/goods_details?action=share&id=' + goodsDetail.id)">
				邀请好友拼单
			</view>
			<view class="invite back-index" @click="goIndex">
				去首页逛逛
			</view>
			<view class="to-goods-detail" @click="goPage('/pages/goods_details/goods_details?id=' + goodsDetail.id)">
				<view class="goods-detail-main">
					<custom-image mode="widthFix" :lazy-load="true" width="56rpx" height="56rpx" radius="10rpx"
						lazy-load :src="goodsDetail.pics[0]"></custom-image>
					<view class="goods-detail-title line1">
						{{ goodsDetail.title }}
					</view>
				</view>
				<view class="goods-detail-main">
					<text>订单详情</text>
					<u-icon name="arrow-right" color="#C7C4CC" size="28"></u-icon>
				</view>
			</view>
		</view>
		<u-tabs :list="tabList" active-color="#000000" inactive-color="#C7C4CC" :is-scroll="true" :current="currentTab"
			@change="tabChange"></u-tabs>
		<view class="hot" style="padding-top: 20rpx;background-color: #ffffff;">
			<active-area type="hot" progressBarColor="#9912FE" :lists="indexList.list">
			</active-area>
			<loading-footer :status="indexList.status" :slot-empty="true">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/images/goods_null.png"></image>
					<text class="lighter">暂无商品</text>
				</view>
			</loading-footer>
		</view>
	</view>
</template>

<script>
	import {
		trottle
	} from '@/utils/tools';
	import {
		getGoodsSearch,
		getCatrgory
	} from '@/api/store';
	import {
		loadingType
	} from '@/utils/type';
	import {
		loadingFun
	} from '@/utils/tools'
	import PageExposure from "@/mixins/page_exposure.js"

	export default {
		mixins: [PageExposure],
		data() {
			return {
				scrollTop: 0,
				percent: 0,
				isFirstLoading: true,
				product_id: null,
				currentTab: 0,
				indexList: {
					params: {
						page: 1,
						pagesize: 10,
						id: null,
						first_cate_id: null,
						second_cate_id: null,
						third_cate_id: null,
						province: null,
						city: null,
						search_keyword: null,
						merchant_id: null,
						order_column: null, // 排序字段 platform_commission-平台佣金（默认） sale_nunm-销量
						order_value: null, // 排序方式 desc-倒序，默认 asc-升序
						// last_group_limit: 1 // 获取未成团订单数量，默认为1
					},
					list: [],
					status: loadingType.LOADING,
				},
				cateOptions: [],
				tabList: [],
				goodsDetail: {}
			};
		},
		onLoad(options) {
			this.onPageScroll = trottle(this.onPageScroll, 500, this)
			// this.product_id = 96
			if (!options.id) {
				return this.$toast({
					title: '缺少参数，无法查看商品'
				}, {
					tab: 3
				});
			} else {
				this.product_id = options.id;
			}
			this.getGoodsList();
			this.getCatrgoryData();
		},
		async onShow() {
			await this.getGoodsDetailFun();
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			this.percent = scrollTop / top > 1 ? 1 : scrollTop / top
			this.scrollTop = scrollTop
		},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			getCatrgoryData() {
				getCatrgory().then(res => {
					this.cateOptions = res.d.data
					this.tabList = []
					this.tabList.push({
						id: null,
						name: '全部项目'
					})
					if (this.cateOptions && this.cateOptions.length) {
						this.delArr(this.cateOptions)
						this.cateOptions.forEach(item => {
							this.tabList.push({
								id: item.id,
								name: item.name
							})
						})
					}
				})
			},
			delArr(obj) {
				obj.forEach(item => {
					if (item.children && item.children.length) {
						this.delArr(item.children)
					} else {
						item.children = ''
					}
				})
			},
			async getGoodsList() {
				if (loadingType.FINISHED == this.indexList.status) return;
				const data = await loadingFun(getGoodsSearch, this.indexList.params.page, this.indexList.list, this
					.indexList.status, this.indexList.params);
				if (!data) return
				this.indexList.params.page = data.page;
				this.indexList.list = data.dataList;
				this.indexList.status = data.status;
			},
			tabChange(index) {
				this.currentTab = index;
				this.indexList.params.first_cate_id = this.tabList[index].id
				this.indexList.params.page = 1;
				this.indexList.list = [];
				this.indexList.status = loadingType.LOADING;
				this.getGoodsList();
			},
			async getGoodsDetailFun() {
				const goodsDetail = await getGoodsSearch({
					id: this.product_id,
					page: 1,
					pagesize: 10,
				});
				const data = goodsDetail.d.data[0]
				if (goodsDetail.s == 0) {
					let {
						pics,
						sell_etime,
						sell_stime
					} = data;
					this.goodsDetail = data;
					this.$nextTick(() => {
						this.isFirstLoading = false;
					})
				}
				console.log(this.goodsDetail, 'goodsDetail')
			},
			goIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
		computed: {}
	};
</script>
<style lang="scss" scoped>
	.sec-container {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;

		.sec-main {
			width: 100%;
		}
	}

	.sec-title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 60rpx;

		.sec-title-icon {
			width: 40rpx;
			height: 40rpx;
			border-radius: 20rpx;
			background-color: #23B311;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.sec-title-text {
			color: #23B311;
			font-size: 32rpx;
			margin-left: 20rpx;
		}
	}

	.sec-title-tips {
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.team-follow-user__tips-top {
		font-size: 32rpx;
		text-align: center;
		color: #000000;
		margin-bottom: 40rpx;

		text {
			color: #E02E22;
		}
	}

	.invite {
		width: 100%;
		height: 80rpx;
		border-radius: 16rpx;
		background-color: #FF5E61;
		text-align: center;
		line-height: 80rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.back-index {
		background-color: #ffffff;
		border: 2rpx solid #FF5E61;
		color: #FF5E61;
	}

	.to-goods-detail {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 20rpx;
		border: 4rpx solid #f8f8f8;

		.goods-detail-main {
			display: flex;
			align-items: center;

			.goods-detail-title {
				margin-left: 20rpx;
			}
		}

		text {
			color: #707070;
		}
	}
</style>